// boder-radius: 0 !important;
// .el-input__inner,
// // .el-checkbox__inner,
// .el-tag,
// .el-button {
//     border-radius: 2px;
// }

// >>>>> button <<<<<
.el-button {
    @apply transition-none;
}

.el-button--text {
    line-height: inherit;
    @apply py-0 border-0;
}

// form
.el-form-item {
    margin-bottom: 8px !important;
}

.el-form-item__content {
    line-height: inherit !important;
}

.el-form-item__label {
    line-height: 24px;
    padding: 0;
    margin-bottom: 4px;
}

.el-form--label-top .el-form-item__label {
    line-height: 24px;
    padding: 0;
    margin-bottom: 4px;
}

// >>>>> input <<<<<

// .el-input--small .el-input__icon {
//     line-height: 34px;
// }
.el-input--small {
    font-size: 14px;
}

.el-input--small:not(.el-input--prefix) .el-input__inner {
    @apply pl-2;
}

.el-input--small:not(.el-input--suffix) .el-input__inner {
    @apply px-2;
}

.el-textarea__inner {
    font-family: inherit;
    // border-radius: 2px;
    @apply p-2;
}

// >>>>> checkbox <<<<<
.el-checkbox {
    @apply inline-flex items-center;

    &__input {
        font-size: 0;
        @apply block;
    }

    &__label {
        @apply text-sm !important;
    }
}

// >>>>> tree <<<<<
.el-tree-node__expand-icon.is-leaf {
    @apply invisible;
}

// >>>>> table <<<<<
.el-table {
    @apply ring-1 ring-gray-200 rounded;
    &::before {
        // height: 2px;
        // background-color: #009879;
        @apply hidden;
    }

    td,
    th {
        @apply py-3 border-b-0 border-t border-gray-200 align-top;
    }

    th.is-leaf {
        @apply bg-gray-50 text-gray-900 border-b-0 border-t-0;
    }

    .cell {
        @apply px-3 leading-6;
    }

    .el-table-column--selection .cell {
        @apply flex h-6 justify-center items-center;
    }
}

// >>>>> select <<<<<
.el-select {
    width: 100%;
}

.select-tree {
    padding: 0;
    height: auto;
}

// >>>>> dialog <<<<<
.v-modal {
    opacity: 0.32;
}

.el-dialog__wrapper {
    @apply px-8 flex;
}

.el-dialog {
    max-height: 90%;
    @apply m-0 w-full max-w-lg rounded-lg p-6 shadow-lg overflow-auto;

    &__headerbtn {
        @apply w-7 h-7 top-6 right-6 text-center rounded-full bg-gray-50 hover:bg-gray-100 z-10 text-sm;
    }

    &__wrapper {
        @apply flex items-center justify-center;
    }

    &__headerbtn:hover &__close {
        color: #909399;
    }

    &__title {
        @apply text-lg;
    }

    &__header {
        @apply p-0 pb-4;
    }

    &__body {
        @apply p-0;
    }

    &__footer {
        @apply p-0 pt-4;
    }
}

// message-box
.el-message-box {
    @apply border-0 shadow p-4 w-full max-w-sm;

    &__header {
        @apply p-0 pb-4;
    }

    &__headerbtn {
        @apply w-7 h-7 top-0 right-0 text-center rounded-full bg-gray-50 hover:bg-gray-100 z-10 text-sm;
    }

    &__headerbtn:hover &__close {
        color: #909399;
    }

    &__title {
        @apply text-lg;
    }

    &__content {
        @apply p-0;
    }

    &__btns {
        @apply p-0 pt-4;
    }
}

// >>>>> tabs <<<<<
.el-tabs {
    &__header {
        @apply mb-6;
    }

    &__nav {
        @apply flex flex-wrap;
    }

    &__content {
        @apply overflow-visible;
    }

    &__item {
        color: #8b90a7;
        @apply h-auto text-sm pb-3 px-6;

        &:hover {
            @apply cursor-default text-gray-900;
        }

        &.is-active {
            @apply text-gray-900 font-semibold;
        }
    }

    &__nav-wrap {
        @apply mb-0;

        &::after {
            @apply hidden;
        }
    }

    &__active-bar {
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        @apply bg-gray-900;
    }
}

// >>>>> alert <<<<<
.el-alert {
    @apply py-2 px-3 mb-4;

    &__content {
        @apply px-0;
    }

    &__description {
        @apply text-sm mt-0 !important;
    }

    &--success.is-light {
        background-color: #e6f2e6;
        border-color: #4caf50;
        @apply border;

        .el-alert__description {
            color: #4caf50;
        }
    }

    &--info.is-light {
        background-color: #e1effa;
        border-color: #2196f3;
        @apply border;

        .el-alert__description {
            color: #2196f3;
        }
    }

    &--danger.is-light {
        background-color: #fbe7e7;
        border-color: #ff5252;
        @apply border;

        .el-alert__description {
            color: #ff5252;
        }
    }
}

// tree-select
.vue-treeselect__control {
    @apply w-auto !important;
}

.vue-treeselect__x-container,
.vue-treeselect__control-arrow-container {
    @apply px-1 !important;
}
